<template>
	<view>
		<view class="bg-view"></view>
		<view class="user-view">
			<view class="user-info">
				<image :src="`${IMG_URL}${entity.avatarImg}`" mode="aspectFill" class="head-portrait"></image>
				<view class="user-content">
					<view class="user-name">{{entity.nickName}}</view>
					<view class="integral-view">
						<image src="/static/enterprise-icon.png" class="integral-icon"></image>
						<view>积分 {{entity.points}}</view>
					</view>
				</view>
			</view>
			<navigator url="/pagesHome/signDetail/signDetail" hover-class="none" class="detail-but">
				<view style="margin-right: 11upx;">奖励明细</view>
				<uni-icons type="right" color="#FF2615" size="22upx"></uni-icons>
			</navigator>
		</view>
		<view class="card-title">
			<image src="/static/Sign-card-tote.png" class="title-image"></image>
			<view class="sign-number">
				<view class="number-view">
					<view>第</view>
					<view class="number-text">{{entity.cumulateDays}}</view>
					<view>天</view>
				</view>
				<view class="number-desc">已累计签到</view>
			</view>
			<view class="sign-desc">{{entity.description}}</view>
		</view>

		<view class="card-view">
			<view v-for="(item, index) in entity.clientSignList" :key="index" class="card-item"
				:class="{'card-active': item.active}">
				<view class="item-content">
					<view class="name-text">{{item.name}}</view>
					<image v-if="item.signFlag" :src="`${IMG_URL}${item.iconUrl}`" class="image-icon"></image>
					<image v-else :src="`${IMG_URL}${item.iconUrl}`" class="image-icon"></image>
					<view class="number-view">
						<view>+</view>
						<view>{{item.points}}</view>
					</view>
				</view>
				<image v-if="entity.clientSignList.length == index + 1" src="/static/Sign-goods.png" class="sign-goods">
				</image>
			</view>
		</view>

		<view class="card-button ">
			<view class="button-view" :class="{'button-active': !entity.todaySign}" @click="onSubmit">
				{{entity.todaySign ? '已签到' : '立即签到'}}
			</view>
		</view>

		<view v-if="succeedDialog" class="succeed-dialog">
			<view class="dialog-content">
				<image src="/static/Sign-bg.png" class="dialog-bg"></image>
				<image src="/static/Sign-but.png" class="succeed-icon"></image>
				<view class="integral-view">
					<view>奖励</view>
					<view class="integral-text">{{succeedEntity.points}}</view>
					<view>积分</view>
				</view>
				<view class="dialog-desc">{{succeedEntity.signDesc}}</view>
				<view class="close-view" @click="succeedDialog = false">
					<image src="/static/close-da.png" class="close-icon"></image>
				</view>
			</view>
		</view>

		<SignDialog v-if="isSignDialog" :entity="entity" @close="isSignDialog = false"></SignDialog>
	</view>
</template>

<script>
	import SignDialog from './components/SignDialog.vue';
	export default {
		components: {
			SignDialog
		},
		data() {
			return {
				isSignDialog: false,
				succeedDialog: false,
				entity: {
					"userId": "",
					"nickName": "",
					"avatarImg": "",
					"points": 0,
					"cumulateDays": 0,
					"todaySign": false,
					"description": "",
					"clientSignList": [],
					"clientSignSayingList": []
				},
				succeedEntity: {
					"points": 0,
					"additionalPoints": 0,
					"signDesc": ""
				}
			};
		},
		onLoad(options) {
			this.getSignList()
		},
		methods: {
			async onSubmit() {
				if (this.entity.todaySign) return this.isSignDialog = true
				uni.$util.showLoading()
				const res = await uni.$api.getUserSign().finally(uni.finally)
				this.succeedDialog = true
				this.getSignList()
			},
			async getSignList() {
				const res = await uni.$api.getSignList()
				this.entity = res.data
				console.log(res.data.todaySign, this.succeedDialog)
				this.isSignDialog = this.entity.todaySign && !this.succeedDialog
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg-view {
		width: 750rpx;
		height: 1000rpx;
		background: linear-gradient(180deg, #FF2615 0%, #F7F2EE 100%);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.user-view {
		width: 100%;
		padding: 29upx;
		@extend .row-between;
		position: relative;
		z-index: 1;

		.user-info {
			@extend .row;

			.head-portrait {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}

			.user-content {
				margin-left: 24upx;

				.user-name {
					font-size: 43rpx;
					font-weight: 600;
					color: #FFFFFF;
				}

				.integral-view {
					@extend .row-start;
					margin-top: 9upx;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;

					.integral-icon {
						width: 27upx;
						height: 27upx;
						margin-right: 9upx;
					}
				}
			}
		}

		.detail-but {
			@extend .row;
			width: 174rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 35rpx;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF2615;
		}
	}

	.card-title {
		width: 707rpx;
		height: 139upx;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		@extend .row-start;
		align-items: flex-start;

		.title-image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.sign-number {
			position: relative;
			z-index: 1;
			@extend .column;
			margin-top: 7upx;
			margin-left: 43upx;

			.number-view {
				@extend .row;
				align-items: baseline;
				font-size: 22rpx;
				font-weight: 400;
				color: #2C1101;

				.number-text {
					font-size: 47rpx;
					color: #FF2A19;
					margin: 0 10upx;
				}
			}

			.number-desc {
				font-size: 18rpx;
				font-weight: 400;
				color: #B8ACA3;
			}
		}

		.sign-desc {
			position: relative;
			z-index: 1;
			width: 324rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 33upx;
			margin-left: 96upx;
		}

	}

	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		backdrop-filter: blur(4px);
		flex-wrap: wrap;
		@extend .row-start;
		padding-right: 22upx;
		padding-left: 4upx;
		margin-top: -18upx;

		.card-item {
			width: calc(100% / 4 - 18upx);
			height: 161upx;
			@extend .row;
			padding: 11upx 0;
			background: #EFF6FF;
			margin-left: 18upx;
			margin-top: 18upx;
			border-radius: 14rpx;

			&:last-child {
				width: calc(100% / 2 - 18upx);
				justify-content: space-between;

				.item-content {
					width: calc(100% / 2);
				}
			}

			.item-content {
				width: 100%;
				height: 100%;
				@extend .column;
				justify-content: space-between;

				.name-text {
					font-size: 22rpx;
					font-weight: 400;
					color: #2C1101;
				}

				.image-icon {
					width: 51upx;
					height: 51upx;
				}

				.number-view {
					@extend .row;
					align-items: baseline;
					font-size: 25rpx;
					font-weight: 600;
					color: #165FBC;
				}
			}

			.sign-goods {
				width: 109upx;
				height: 96upx;
				margin-right: 29upx;
			}

		}

		.card-active {
			background: #FFF4E6;

			.item-content {
				.image-icon {
					width: 56upx;
					height: 51upx;
				}

				.number-view {

					color: #F9A53A;
				}
			}
		}
	}

	.card-button {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 0 0 45rpx 45rpx;
		padding: 22upx;
		position: relative;
		z-index: 1;


		.button-view {
			width: 100%;
			height: 91rpx;
			@extend .column;
			background: linear-gradient(180deg, #FFE4E2 0%, #FFB7B2 100%);
			box-shadow: 0rpx 4 7rpx 0rpx rgba(255, 38, 21, 0.1);
			border-radius: 45rpx;
			font-size: 29rpx;
			font-weight: 400;
			color: #B6716C;
		}

		.button-active {
			color: #FFFFFF;
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
		}
	}

	.succeed-dialog {
		width: 100%;
		height: 100vh;
		background: rgba(6, 0, 0, 0.9);
		@extend .column;
		justify-content: flex-start;
		padding-top: 176upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 22;

		.dialog-content {
			width: 580upx;
			@extend .column;
			position: relative;
			background: white;
			border-radius: 20upx;
			padding-bottom: 54upx;

			.dialog-bg {
				width: 100%;
				height: 324upx;
			}

			.succeed-icon {
				width: 335upx;
				height: 82upx;
				margin-top: -75upx
			}

			.integral-view {
				@extend .row;
				font-size: 33rpx;
				font-weight: 600;
				color: #282726;
				margin: 20upx 0;

				.integral-text {
					font-size: 43rpx;
					color: #FF3829;
					margin: 10upx 0;
				}
			}

			.dialog-desc {
				width: 100%;
				padding: 0 110upx;
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #282726;
				text-align: center;
			}

			.close-view {
				width: 100%;
				position: absolute;
				@extend .row;
				bottom: -114upx;

				.close-icon {
					width: 71upx;
					height: 71upx;
				}
			}
		}
	}
</style>